import React from "react"
import { Form, Input, Button, Toast } from "antd-mobile"
import { useNavigate } from "react-router-dom"
import http from "../../utils/http"
const Index = () => {
  const navigate = useNavigate()
  // 确认登录
  const onFinish = async value => {
    const result = await http.post("/login", value)
    const { code, message, data } = result.data
    if (code === 200) {
      Toast.show({
        content: message,
        icon: "success",
      })
      localStorage.setItem("token", data.token)
      localStorage.setItem("userInfo", JSON.stringify(data.userInfo))
      navigate("/")
    } else {
      Toast.show({
        content: message,
        icon: "fail",
      })
    }
  }
  return (
    <div>
      <Form
        onFinish={onFinish}
        layout="horizontal"
        footer={
          <Button block type="submit" color="primary" size="large">
            提交
          </Button>
        }>
        <Form.Item
          name="username"
          rules={[{ required: true, message: "用户名不能为空" }]}>
          <Input placeholder="请输入用户名" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[
            { required: true, message: "密码不能为空" },
            {
              pattern: /^(?=.*\d)(?=.*\D)[a-zA-z0-9]{6,12}$/,
              message: "密码格式不正确",
            },
          ]}>
          <Input
            type="password"
            onChange={console.log}
            placeholder="请输入密码"
          />
        </Form.Item>
      </Form>
    </div>
  )
}

export default Index
